<template>
	<view class="container">
		<view class="header">
			<image src="/static/images/logo.png" mode="aspectFit"></image>
		</view>
		<view class="login">

			<view class="form-item">
				<image class="login-icon" src="/static/images/user.png" style="width: 30rpx;height: 30rpx;" mode="">
				</image>
				<input type="text" v-model="formData.stuId" placeholder="请输入学号" />
			</view>
			<view class="form-item">
				<image class="login-icon" src="/static/images/password.png" mode=""></image>
				<input type="password" v-model="formData.password" placeholder="请输入密码" />
			</view>

			<u-checkbox @change="checkboxChange" v-model="formData.saveCount">记住账号密码(仅本地存储)</u-checkbox>

			<button class="cu-btn" type="default" @click="login">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		loginRequest
	} from "@/api/main.js"
	export default {
		data() {
			return {
				formData: {
					stuId: '',
					password: '',
					saveCount: false
				}
			};
		},
		onLoad() {
			this.initAccount();
		},
		methods: {
			initAccount() {
				const accountCache = uni.getStorageSync('account')
				console.log(accountCache);
				if (accountCache) {
					this.formData = JSON.parse(accountCache)
					console.log(this.formData);
				}
			},
			checkboxChange(e) {

			},
			login() {
				// 视频中类似的请求封装
				loginRequest(this.formData).then(res => {
					console.log(res);
					this.$store.commit('setToken', res)
					this.$store.commit('setLoginInfo', this.formData)
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						success: (res) => {
							return setTimeout(() => {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 1500)
						}
					})
				})
				return

				// 自行封装的请求。
				// uni.showLoading({
				// 	title: "登录中。。。"
				// })
				// this.$H.post('/login', this.formData, {}).then(res => {
				// 	this.$store.commit('setToken', res)
				// 	this.$store.commit('setLoginInfo', this.formData)
				// 	uni.showToast({
				// 		title: '登录成功',
				// 		icon: 'none',
				// 		success: (res) => {
				// 			return setTimeout(() => {
				// 				uni.switchTab({
				// 					url: "/pages/index/index"
				// 				})
				// 			}, 1500)
				// 		}
				// 	})
				// }).finally(() => {
				// 	uni.hideLoading()
				// })
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 改变组件颜色
	.u-checkbox /deep/ .u-checkbox__icon-wrap--checked {
		color: #fff;
		background-color: $main-color-primary;
		border-color: $main-color-primary;
	}

	page {
		background: rgba(250, 250, 250, 1);
	}

	.header {
		display: flex;
		justify-content: center;
		margin-top: 106rpx;

		image {
			width: 288rpx;
			height: 176rpx;
		}
	}

	.login {
		padding: 64rpx;
		margin-top: 60rpx;

		.form-item {
			width: 614rpx;
			height: 98rpx;
			border-radius: 60rpx;
			background: #FFFFFF;
			border: 2px dashed rgba(232, 232, 232, 0.86);
			box-shadow: 0px 0px 4px -8px rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-bottom: 48rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 30rpx;
			}
		}

		button {
			margin-top: 30rpx;
			width: 614rpx;
			height: 96rpx;
			border-radius: 48rpx;
			color: #fff;
			background: linear-gradient(90deg, rgba(193, 239, 245, 0.9) 0%, #0AE8F0 0%, #88F2DF 100%);
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
		}

	}
</style>